<template>
  <div class="box">
    <h3>Bing数码商城</h3>
    <div>
      <span>热门城市：</span>
      <select v-model="city_id" @change="changeCity">
        <option value="0">选择城市</option>
        <option v-for="(item, index) in city" :value="item.code" :key="index">{{ item.name }}</option>
      </select>
      &nbsp;
      <select v-model="area_id" @change="changeArea">
        <option value="0">选择区县</option>
        <option v-for="(item, index) in areaList" :value="item.area_id" :key="index">{{ item.area_name }}</option>
      </select>
    </div>
  </div>
  <div id="container"></div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, shallowRef } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { $get } from "../utils/request"
let map = shallowRef(null);
// 备份AMap对象
let currentAMap = null;
const city = ref([])
const city_id = ref('0')
const area_id = ref('0')
const areaList = ref([])
const areaLocation = ref('')
const getCityList = async () => {
  area_id.value = '0'
  const res = await $get("/api/aj/getcitycode")
  city.value = res.result.hotcity
}

const changeArea = async () => {
  let address = city.value.find(c => c.code === city_id.value).name + areaList.value.find(a => a.area_id === area_id.value).area_name
  // 获取制定的区域的经纬度
  const res1 = await $get("https://restapi.amap.com/v3/geocode/geo", {
    key: '3e75af85d89ec018cfb8bf58795888a6',
    address
  })
  areaLocation.value = res1.geocodes[0].location

  // 设置地图的经纬度和坐标
  map.value.setZoomAndCenter(14, areaLocation.value.split(","))

  if (area_id.value !== '0') {
    const res = await $get("/api/at/shop", {
      city_id: city_id.value,
      area_id: area_id.value,
    })
    // 清除地图上所有的覆盖物
    map.value.clearMap();
    // 循环遍历所有的商城  
    res.shop_data.forEach(item => {
      // 在地图上打点
      const marker = new currentAMap.Marker({
        // 位置
        position: new currentAMap.LngLat(item.map_longitude, item.map_latitude),
        // 标题
        title: item.shop_name
      })
      // 将marker添加到地图上
      map.value.add(marker)

      // 给每一个marker绑定点击事件
      marker.on('click', (e) => {
        // 弹出框显示商城信息
        let infoWindow = new currentAMap.InfoWindow({
          content: `
            <div style="display:flex;width:400px;align-items:center">
              <div>
                <img style="width: 100px; height: 100px;" src="${item.shop_ico}" alt=""/>
              </div>
              <div style="margin-left: 10px;font-size:13px">
                <div>
                <span >商店名称：${item.shop_name}</span>  
              </div>
              <div>
                <span >商城地址：${item.addr}</span>
              </div>
              <div><span >商城简介：${item.shop_desc}</span></div></div>
            </div>
          `,
          // 位置偏移量
          offset: new currentAMap.Pixel(0, -30)
        })
        infoWindow.open(map.value, e.target.getPosition())
      })
    });
  }
}

const changeCity = async () => {
  areaList.value = []
  const res = await $get('/api/aj/get_area', {
    citycode: city_id.value
  })
  areaList.value = Object.keys(res.result).map(item => {
    return {
      area_id: item,
      area_name: res.result[item]
    }
  })
  areaList.value
}

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "cfb68be80cdc244a91270053407369b3",
  };
  AMapLoader.load({
    key: "a0c0fae218ec9fde6255ab61a432f1a8", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.ToolBar","AMap.MapType","AMap.HawkEye"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      currentAMap = AMap
      map.value = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });

      // 添加比例尺插件
      map.value.addControl(new AMap.Scale());
      // 添加工具条
      map.value.addControl(new AMap.ToolBar());
      // 切换卫星图
      map.value.addControl(new AMap.MapType());
      // 添加鹰眼控件
      map.value.addControl(new AMap.HawkEye({ visible: true }));
    })
    .catch((e) => {
      console.log(e);
    });

  getCityList()
});

onUnmounted(() => {
  map.value?.destroy();
});
</script>
<style scoped>
#container {
  padding: 0;
  margin: 5px;
  box-sizing: border-box;
  width: 100%;
  height: 680px;
}

.box {
  margin: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
}

.box h3 {
  color: #ccc
}
</style>
